<div class="card mb-0" id="rule">
    <div class="card-header">
        添加回复规则
    </div>
    <div class="card-block">
        <div class="form-group row">
            <label class="col-12 col-sm-3 col-form-label text-sm-right">规则名称</label>
            <div class="col-12 col-sm-8 col-lg-6">
                <input type="text" required v-model="rule.name" class="form-control form-control-sm">
            </div>
        </div>
        <div class="form-group row" v-for="(v,k) in rule.keywords">
            <label class="col-12 col-sm-3 col-form-label text-sm-right">关键词@{{ k+1 }}</label>
            <div class="col-12 col-sm-8 col-lg-6">
                <div class="input-group mb-3">
                    <input type="text" required class="form-control" v-model="v.key">
                    <div class="input-group-append">
                        <div class="icon-container p-0 ml-2" @click="del(k)">
                            <div class="icon"><span class="mdi mdi-minus"></span></div>
                            {{--<span>删除</span>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <textarea hidden name="rule" id="" cols="30" rows="10">@{{ rule }}</textarea>
        <div class="from-group row">
            <div class="col-sm-3"></div>
            <div class="col-sm-8">
                <button class="btn btn-secondary" @click="add()" type="button">添加关键词</button>
            </div>
        </div>
    </div>
</div>
<script>
    require(['vue'],function(vue){
        new vue({
            el:'#rule',
            data:{
                rule:{
                    id:{!! $rule['id']?:0 !!},
                    name:"{!! $rule['name']?:'' !!}",
                    keywords:{!! $rule->keywords!!}
                }
            },
            methods:{
                add(){
                    this.rule.keywords.push({key:''})
                },
                del(k){
                    this.rule.keywords.splice(k,1);
                }
            }
        })
    })
</script>